<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <!-- <div class="container-header">
            <div class="container-header-tr">
                <div>
                    <span class="s1">用户名称</span>
                    <a-input
                        v-model="form.task_name"
                        placeholder="请输入用户名称"
                    />
                </div>
                <div>
                    <div class="btn mr20" @click="searchButton">
                        <icon-search class="mr6" />
                        搜索
                    </div>
                    <div class="btn gray" @click="resetButton">
                        <icon-delete class="mr6" />
                        重置
                    </div>
                </div>
            </div>
        </div> -->
            <div class="container-content">
                <div class="container-content-button"></div>
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #status="{ record }">
                            <span v-if="record.status == 1">{{
                                $t('basics.NotYetStarted')
                            }}</span>
                            <span v-if="record.status == 2">{{
                                $t('basics.UnderWay')
                            }}</span>
                            <span v-if="record.status == 3">{{
                                $t('basics.completed')
                            }}</span>
                            <span v-if="record.status == 4">{{
                                $t('basics.stop')
                            }}</span>
                            <span v-if="record.status == 5">{{
                                $t('basics.deleteTxt')
                            }}</span>
                        </template>
                        <template #operate="{ record }">
                            <a-button
                                size="mini"
                                type="text"
                                @click="toDetail(record.id)"
                                >{{ $t('basics.xiangqing') }}</a-button
                            >
                        </template>
                    </a-table>
                    <!-- <div class="_crud-footer mt-3 text-right" ref="crudFooterRef">
                    <a-pagination
                        :total="pageList.total"
                        show-total
                        show-jumper
                        show-page-size
                        @page-size-change="getList"
                        @change="getList"
                        v-model:current="form.page"
                        v-model:page-size="form.pageSize"
                        style="display: inline-flex"
                    />
                </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { getProjectList } from '@/api/cloud/client.js';
import { useRouter } from 'vue-router';
import { $request } from '@/utils/request.js';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const router = useRouter();
const loading = ref(true);
// 控制对话框
const visible = ref(false);
// 绑定项目表单
const bandForm = ref({});
const columns = [
    {
        title: t('basics.taskID'),
        dataIndex: 'id',
        slotName: 'id',
        width: 80
    },
    {
        title: t('basics.renwumingchen'),
        dataIndex: 'task_name',
        slotName: 'task_name'
    },
    {
        title: t('basics.uploadNumber'),
        dataIndex: 'num_of_upload',
        slotName: 'num_of_upload'
    },
    {
        title: t('basics.fsSecc'),
        dataIndex: 'num_of_success',
        slotName: 'num_of_success'
    },
    {
        title: t('basics.fsFail'),
        dataIndex: 'num_of_failed',
        slotName: 'num_of_failed'
    },
    {
        title: t('basics.status'),
        dataIndex: 'status',
        slotName: 'status'
    },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at'
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        minWidth: 80,
        slotName: 'operate'
    }
];

const form = ref({
    task_name: '',
    page: 1,
    pageSize: 10
});
const tableList = ref([]);
const pageList = reactive({
    total: 0
});
// 获取列表数据
const getList = () => {
    loading.value = true;
    $request.get('/TcardClient/task/getList').then((res) => {
        console.log(res);
        tableList.value = res;
        pageList.total = tableList.value.length;
        loading.value = false;
    });
    // getListByUser(form.value).then((res) => {
    //     tableList.value = res.data.items;
    //     pageList.value = res.data.pageInfo;
    //     loading.value = false;
    // });
};
getList();
// 搜索
const searchButton = () => {
    getList();
};
const reset = () => {
    form.value.task_name = '';
    form.value.page = 1;
    form.value.pageSize = 10;
};

const resetButton = () => {
    reset();
    getList();
};
//   进入详情
const toDetail = (task_id) => {
    router.push({ path: '/tcardMessage/taskDetails', query: { task_id } });
};
</script>
<script>
export default { name: 'korea:taskList' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
// .app-container {
//     .container-head {
//         padding: 20px;
//         .formButton {
//             display: flex;
//             justify-content: center;
//             align-items: center;
//         }
//     }
//     .container-content {
//         padding: 16px;
//         padding-top: 10px;
//         .container-content-button {
//             margin-bottom: 10px;
//             .arco-btn {
//                 margin-right: 10px;
//             }
//         }
//     }
// }
// .dialog-foot {
//     text-align: end;
// }
</style>
